<template>
    <Head>
        <Title>{{ article.title }}</Title>
        <Meta v-if="isNoNull(article.description)" name="description" :content="article.description" />
        <Meta v-if="isNoNull(article.keywords)" name="keywords" :content="article.keywords" />
    </Head>
    <div v-if="article" class="article-details-navs">
        <NuxtLink to="/">首页</NuxtLink>
        <i class="ri-arrow-right-s-line" />
        <NuxtLink v-if="article.menu" :to="{ name: 'list-id', params: { id: article.menuId } }">{{ article.menu.name }}</NuxtLink>
        <i class="ri-arrow-right-s-line" />
        <NuxtLink :to="{ name: 'post-id', params: { id: article.id } }">{{ article.title }}</NuxtLink>
    </div>
    <AppLoading class="article-details-loading" :pending="pending">
        <div class="article-details">
            <div class="tops">
                <h1>{{ article.title }}</h1>
                <div class="infos">
                    <span>评论 {{ article.articleCount.comments }}</span>
                    <span class="link">/</span>
                    <span>访问 {{ article.articleCount.looks }}</span>
                    <span class="link">/</span>
                    <span>分类: </span>
                    <NuxtLink v-if="article.menu" :to="{ name: 'list-id', params: { id: article.menuId } }">{{ article.menu.name }}</NuxtLink>
                    <span class="link">/</span>
                    <span>发布时间: </span>
                    <TimeAgo :time="article.createTime" />
                </div>
            </div>
            <div class="datas">
                <div id="article">
                    <Image v-if="isNoNull(article.articleImages)" :size="160" preview :src="article.articleImages" />
                    <!-- 动态 -->
                    <div v-if="isNoNull(article.content)" class="article" v-html="article.content" />
                    <!-- 视频 -->
                    <div v-if="article.type == 2" class="video">
                        <Video ref="videoEl" v-bind="options" @send-danmu="handleSendDanmu" />
                    </div>
                    <!-- 图集 -->
                    <div v-if="article.type == 3 && article.articleImages" class="image">
                        <Image v-if="isNoNull(article.articleImages)" :size="80" preview :src="article.articleImages" />
                    </div>
                    <!-- 音乐 -->
                    <div v-if="article.type == 4" class="music">
                        <Music :list="[{song: article.title, artist: '暂无', url: article.mp3, cover: randomImgs.baseURL }]" />
                    </div>
                </div>
                <div v-if="!isEmpty(article.articleTags)" class="tags">
                    <NuxtLink v-for="(item, i) in article.articleTags" :key="i" :to="{ name: 'tags-id', params: { id: item.id } }">
                        <i class="ri-hashtag" />
                        <span>{{ item.name }}</span>
                    </NuxtLink>
                </div>
            </div>
            <comments />
        </div>
    </AppLoading>
</template>
<script setup lang="ts">
import '@less/post/app.less'
import '@less/post/code.less'
import { Toast, isNoNull, isEmpty, Dialog } from 'usuuu'
import type { VideoComponent, VideoDanmaku } from 'usuuu'

/**
 * 全局用户状态
 */
const user = useUser()
/**
 * 动态详情
 */
const { data, pending } = await articleDetailsApi(states().paramsId!)
const article = computed(() => data.value?.data ?? {} as ArticleVo)
/**
 * 播放器实体
 */
const videoEl: Ref<VideoComponent | null> = ref(null)
const { list } = await danmakusApi(states().paramsId!)
const bilibiliDanmu = ref<VideoDanmaku[]>([])
/**
 * 视频配置
 */
const options = computed(() => ({
    title: data.value?.data.title,
    src: data.value!.data.video,
    poster: data.value!.data.cover,
    mobile: 520,
    danmu: {
        open: true,
        data: [...list.value, ...bilibiliDanmu.value]
    }
}))
/**
 * 发送弹幕
 * 
 * @param danmu 弹幕Vo
 */
const handleSendDanmu = async (danmu: VideoDanmaku) => {
    if (validateUser()) {
        const data = await danmakuApi({
            articleId: states().paramsId,
            userId: user.value?.id,
            time: danmu.time,
            mode: danmu.mode,
            color: danmu.color,
            text: danmu.text,
            fontSize: danmu.fontSize
        })
        if (data.code == 200) {
            Toast.open(data.msg)
        } else {
            Toast.open(data.msg)
        }
    }
}
/**
 * 监听弹幕和日志
 */
const stop = watchEffect(async () => {
    /**
     * 弹幕监听
     */
    if (isNoNull(article.value.bilibili)) {
        bilibiliDanmu.value = await bilibiliDanmuParseUrl(`https://api.usuuu.com/danmu/${article.value.bilibili}`)
    }
})
onBeforeUnmount(() => {
    stop()
})
</script>